<template>
	<div class="page w1024">
		<div class="block">
			<p class="block-title">客户资源分配规则</p>
			<div class="block-content">
				<template v-if="level==1">
					<p class="tr clear">
						<span class="th">渠道名称</span>
						<span class="th">分配比例</span>
					</p>
					<p class="tr clear" v-for="item in ruleList">
						<span class="td">{{item.channelname}}</span>
						<span class="td">
							<el-input size="mini" type="number" v-model="item.rate" style="height: 26px;width: 60px;" step="1" min="0" max="100"></el-input>
							%
						</span>
					</p>
					<el-button size="small" type="primary" @click="addChannel"><i class="el-icon-plus"></i>增加渠道</el-button>
				</template>
				<template v-if="level==2">
					<p class="tr clear">
						<span class="th">
							<el-radio v-model="isauto" :label="2">手动分配</el-radio>
  							<el-radio v-model="isauto" :label="1">自动分配</el-radio>
						</span>
					</p>
					<template v-if="isauto==1">
						<p class="tr clear">
							<span class="th">员工姓名</span>
							<span class="th">分配比例</span>
						</p>
						<p class="tr clear" v-for="item in ruleList">
							<span class="td">{{item.channelname}}</span>
							<span class="td">
								<el-input size="mini" type="number" v-model="item.rate" style="height: 26px;width: 70px;" step="1" min="0" max="100"></el-input>
								%
							</span>
						</p>
					</template>
				</template>
				<div class="rule-btn-wrap">
					<el-button size="small" type="primary" @click="updateRuleList">{{network1?'保存中...':'保存'}}</el-button>
				</div>
			</div>

		</div>
		<div class="block">
			<p class="block-title">客户资源跟进规则</p>
			<div class="block-content">
				<p class="para">
					线索超过
					<el-input size="mini" type="number" step="0.1" v-model="ruleObj.maxday" style="height: 26px;width: 70px;" min="0" max="100"></el-input>
					小时未跟进则系统回收线索池<template v-if="level==2"><span>（最多不能超过</span>
						<span class="red">{{ruleObj.parentmaxday}}</span>
						<span>小时）</span>
					</template>
				</p>
				<p class="para">
					资源超过
					<el-input size="mini" type="number" step="0.1" v-model="ruleObj.maxdelayday" style="height: 26px;width: 70px;" min="0"></el-input>
					天未成交则系统回收线索池<template v-if="level==2"><span>（最多不能超过</span>
						<span class="red">{{ruleObj.parentmaxdelayday}}</span>
						<span>天）</span>
					</template>
				</p>
				<p class="para">
					线索超过
					<el-input size="mini" type="number" step="1" v-model="ruleObj.threshold" style="height: 26px;width: 70px;" min="0"></el-input>
					条则系统不分配<template v-if="level==2"><span>（最多不能超过</span>
						<span class="red">{{ruleObj.parentthreshold}}</span>
						<span>条）</span>
					</template>
				</p>
				<p class="para">
					领取公海资源超过
					<el-input size="mini" type="number" step="1" v-model="ruleObj.ghmaxday" style="height: 26px;width: 70px;" min="0"></el-input>
					小时未跟进则系统回收线索池
				</p>
				<p class="para">
					公海资源超过
					<el-input size="mini" type="number" step="1" v-model="ruleObj.ghmaxdelayday" style="height: 26px;width: 70px;" min="0"></el-input>
					天未成交则系统回收线索池
				</p>
			</div>
			<div class="rule-btn-wrap">
				<el-button size="small" type="primary" @click="updateRuleObj">保存</el-button>
			</div>
		</div>

		<el-dialog title="添加渠道" top="30vh" :visible.sync="addVisible" width="400px" center>
			<div class="dialog-content" style="padding: 30px 10px;">
				<div class="clear">
					<div class="form-item">
						<p class="form-item-title"><span class="red">*</span>选择渠道：</p>
						<div class="form-item-content">
							<el-select v-model="addObj.channelid" filterable clearable remote reserve-keyword placeholder="请输入渠道名称或电话搜索" :remote-method="remoteMethod" :loading="loading">
								<el-option v-for="item in options" :key="item.userid" :label="item.username" :value="item.userid">
								</el-option>
							</el-select>
						</div>
					</div>
				</div>
				<!--<div class="clear">
					<div class="form-item">
						<p class="form-item-title"><span class="red">*</span>联系电话：</p>
						<div class="form-item-content">
							<el-input size="small" v-model="addObj.phone" placeholder="请输入联系电话"></el-input>
						</div>
					</div>
				</div>-->
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="addVisible=false">取 消</el-button>
			    <el-button type="primary" @click="confirmAdd">确 认</el-button>
			</span>
		</el-dialog>
		<input type="hidden" name="" id="" :value="user" />
	</div>
</template>

<script>
	export default {
		name: 'DistributeManage',
		data() {
			return {
				level: '',
				loading: false,
				addVisible: false,
				network1:false,
				network2:false,
				isauto:'',
				addObj: {
					channelid: '',
					channelname: '',
					phone: '',
				},
				ruleObj: {
					threshold: '',
					maxday: '',
					maxdelayday:'',
					ghmaxday:'',
					ghmaxdelayday:'',
				},
				options: [],
				ruleList: [],
			}
		},
		computed:{
			user(){
				if(this.$store.state.user){
					this.level=this.$store.state.user.crmLevel
				}
				return this.$store.state.user
			}
		},
		mounted() {
			this.queryRuleList()
			this.queryRuleObj()
		},
		methods: {
			addChannel() {
				this.addObj = {
					channelid: '',
					channelname: '',
					phone: '',
				}
				this.options = []
				this.addVisible = true
			},
			queryRuleList(){
				this.$request.queryRuleList()
				.then(res=>{
					if(res.code==0){
						this.isauto=res.isauto
						this.ruleList=res.list||[]
					}
				})
			},
			queryRuleObj(){
				this.$request.queryRuleObj()
				.then(res=>{
					if(res.code==0){
						this.ruleObj=res.data||{}
						console.log(this.ruleObj)
					}
				})
			},
			updateRuleList() {
				if(this.network1){
					return
				}
				var rate=0
				var flag=true
				this.ruleList.forEach(item=>{
					rate+=Number(item.rate)
					if(!item.rate&&item.rate!==0){
						flag=false
					}
				})
				if(!flag){
					this.msgError('请输入分配比例')
					return
				}
				if(rate!=100){
					this.msgError('分配比例之和应为100')
						return
				}
				this.network1=true
				this.$request.updateRuleList({
					isauto:this.isauto,
					rules:JSON.stringify(this.ruleList)
				}).then(res=>{
					if(res.code==0){
						this.msgSuccess('保存成功')
					}else{
						this.msgError(res.msg)
					}
					this.network1=false
				})
			},
			updateRuleObj() {
				console.log(this.ruleObj)
				if(this.network2){
					return
				}
				if(!this.ruleObj.maxday||!this.ruleObj.maxdelayday||!this.ruleObj.threshold||!this.ruleObj.ghmaxday||!this.ruleObj.ghmaxdelayday){
					this.msgError('请完整填写跟进规则')
					return
				}
				if(this.level==2){
					if(this.ruleObj.maxday>this.ruleObj.parentmaxday){
						this.msgError('跟进时间限制不能超过上级渠道分配的时间')
						return
					}
					if(this.ruleObj.maxdelayday>this.ruleObj.parentmaxdelayday){
						this.msgError('成交时间限制不能超过上级渠道分配的时间')
						return
					}
					if(this.ruleObj.parentthreshold>this.ruleObj.parentthreshold){
						this.msgError('条数限制不能超过上级渠道分配的条数')
						return
					}
				}
				this.network2=true
				this.$request.updateRuleObj(this.ruleObj)
				.then(res=>{
					if(res.code==0){
						this.msgSuccess('保存成功')
					}else{
						this.msgError(res.msg)
					}
					this.network2=false
				})
			},
			remoteMethod(query) {
				if(query !== '') {
					this.loading = true;
					this.$request.searchChannelList({
						username: query
					}).then(res => {
						if(res.code == 0) {
							this.options = res.list
						} else {
							this.options = [];
						}
						this.loading = false
					})
				} else {
					this.options = [];
				}
			},
			confirmAdd() {
				if(!this.addObj.channelid) {
					this.msgError('请选择渠道')
					return
				}
//				if(!this.addObj.phone) {
//					this.msgError('请输入联系电话')
//					return
//				}
				var channelname
				this.options.forEach(item => {
					if(item.userid == this.addObj.channelid) {
						channelname = item.username
					}
				})
				this.ruleList.push({
					channelid: this.addObj.channelid,
					channelname: channelname,
					rate: 0,
				})
				this.addVisible = false
			},
		}
	}
</script>

<style scoped="" lang="scss">
	.page {
		background: transparent;
		.block {
			text-align: left;
			background: #fff;
			margin-bottom: 10px;
			padding: 0 30px 40px 30px;
			.block-title {
				font-size: 16px;
				color: #333;
				font-weight: bold;
				line-height: 21px;
				padding-top: 30px;
				padding-bottom: 20px;
			}
			.block-content {
				padding-left: 30px;
				.tr {
					font-size: 14px;
					margin-bottom: 16px;
					.th {
						color: #666;
						float: left;
						width: 45%;
					}
					.td {
						color: #333;
						font-weight: bold;
						height: 26px;
						float: left;
						line-height: 26px;
						width: 45%;
					}
				}
				.para {
					height: 26px;
					line-height: 26px;
					font-size: 14px;
					color: #333;
					margin-bottom: 20px;
				}
				.el-icon-plus {
					font-weight: bold;
					margin-right: 3px;
				}
				.rule-btn-wrap {
					margin-top: 50px;
				}
				>>>.el-input__inner {
					font-weight: bold;
				}
				>>>.el-input__inner[type="number"] {
					font-weight: bold;
					padding-right: 0;
				}
			}
		}
	}
	
	>>>.el-dialog__body {
		padding: 0 16px 10px;
		.dialog-content {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			padding: 20px 10px;
			>.clear {
				margin-bottom: 20px;
				&:last-child {
					margin-bottom: 0;
				}
			}
			.form-item {
				margin-bottom: 0px;
				float: left;
				.form-item-content {
					width: 180px;
				}
			}
		}
	}
</style>